<template>
  <div class="pro-content">
    <div class="left">
      <mt-navbar v-model="selected" v-for="(item,index) in topProItem" :key="index">
        <mt-tab-item :id="item.id">{{item.categoryName}}</mt-tab-item>
      </mt-navbar>
    </div>
    <div class="right">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item :id="item.id" v-for="(item,index) in topProItem" :key="index">
          <ul class="pro-list">
            <li v-for="(item2,index) in secondCateList" :key="index">
              <router-link to>
                <img :src="'http://127.0.0.1:3000/'+item2.brandLogo" alt>
                <p>{{item2.brandName}}</p>
              </router-link>
            </li>
            <span v-show= "secondCateList.length===0" id="message">没有任何数据</span>
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
import { queryTopProduct, querySecondCategory } from "@/api";
export default {
  data() {
    return {
      selected: "",
      topProItem: [],
      secondCateList: []
    };
  },
  watch: {
    selected(value) {
      querySecondCategory(value).then(res => {
        this.secondCateList = res.data.rows;
      });
    }
  },
  mounted() {
    queryTopProduct().then(res => {
      this.topProItem = res.data.rows;
      this.selected = res.data.rows[0].id;
    });
  }
};
</script>
<style lang="scss" scoped>
.pro-content {
  display: flex;
  height: 100%;
  .left {
    width: 80px;
    .mint-navbar {
      flex-direction: column;
    }
  }
  .right {
    flex: 1;
    .pro-list {
      width: 100%;
      > li {
        width: 33.33%;
        text-align: center;
        margin-bottom: 10px;
        float: left;
        img {
          display: block;
          width: 100%;
        }
      }
      #message{
        margin: 10px auto;
        text-align: center;
        color:red;
      }
    }
  }
}
</style>
